<template>
	<view>
		<uni-popup ref="returnMessage" type="message">
			<uni-popup-message type="success" :message="returnMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="continueMessage" type="message">
			<uni-popup-message type="success" :message="continueMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-list-item :disabled="true" title="记录信息"></uni-list-item>
		<!-- 借阅信息 -->
		<uni-list-item>
			<template v-slot:body>
				<view class="content">
					<view style="font-weight: 700;">
						状态：
						<span class=" stateData" style="color: #18bc37;" v-if="showBorrow.isBack">
							已还
						</span>
						<span class="stateData" style="color: #e43d33;" v-else>
							未还
						</span>
					</view>
					<view>
						记录编号:
						{{showBorrow.lendId}}
					</view>
					<view>
						记录创建日期:
						{{showBorrow.createTime}}
					</view>
					<view>
						借阅日期:
						{{showBorrow.lendDate}}
					</view>
					<view>
						应还日期:
						{{showBorrow.shouldBackTime}}
					</view>
					<view>
						归还日期:
						{{showBorrow.backDate ? showBorrow.backDate : "---------------" }}
					</view>
					<view>
						剩余续借次数:
						{{showBorrow.renewCount}}
					</view>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item :disabled="true" title="图书信息"></uni-list-item>
		<!-- 图书信息 -->
		<uni-list-item link to="" @click="">
			<template v-slot:header>
				<img style="width: 100px;" :src="showBook.url" alt="">
			</template>
			<template v-slot:body>
				<view class="content">
					<view style="font-weight: 700;">
						{{showBook.name}}
					</view>
					<view>
						评分:
						{{result.rateAvg}}
					</view>
					<view>
						作者:
						{{showBook.author}}
					</view>
					<view>
						ISBN:
						{{showBook.isbn}}
					</view>
					<view>
						出版社:
						{{showBook.publish}}
					</view>
				</view>
			</template>
		</uni-list-item>
		<button class="button" @click="handleReturnClick">归还图书</button>
		<button class="button" @click="hadnleContinueClick">续借图书</button>
	</view>
</template>

<script>
	import {
		getBorrowList,
		getBook,
		returnBook,
		continueBook,
		rateAvg
	} from '../../../../api/system/borrow';

	export default {
		name: "detail",
		data() {
			return {
				params: {
					lendId: "",
					bookId: ""
				},
				result: {
					borrowDetail: {},
					bookDetail: {},
					rateAvg: 0
				},
				returnMessage: "还书成功",
				continueMessage: "续借成功"
			}
		},
		computed: {
			showBorrow() {
				return this.result.borrowDetail
			},
			showBook() {
				return this.result.bookDetail
			}
		},
		onLoad({
			lendId,
			bookId
		}) {
			this.params.lendId = lendId
			this.params.bookId = bookId
			this.getBorrow()
			this.getBook()
		},
		methods: {
			// 监听还书点击
			handleReturnClick() {
				returnBook({
					lendId: this.params.lendId
				}).then(() => {
					this.getBorrow()
					this.$refs.returnMessage.open()
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 1000)
				})
			},
			// 监听续借点击
			hadnleContinueClick() {
				continueBook({
					lendId: this.params.lendId
				}).then(() => {
					this.$refs.continueBook.open()
					this.getBorrow()
					this.getBook()
				})
			},
			// 获取借阅记录信息
			getBorrow() {
				getBorrowList(this.params).then(res => {
					console.log(res.rows);
					this.result.borrowDetail = res.rows[0]
				})
			},
			// 获取图书信息
			getBook() {
				getBook({
					bookId: this.params.bookId
				}).then(res => {
					this.result.bookDetail = res.data.data
					return rateAvg({
						bookId: this.params.bookId
					})
				}).then(res => {
					this.result.rateAvg = res ? res.data : 0
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 150px;
		margin-left: 10px
	}

	.button {
		background-color: #18bc37;
		color: #fff;
		border-radius: 10px;
		margin: 10px;
	}
</style>